<template>
  <div>
    <!--<div>添加培养方案课程模板</div>-->
    <a-form :form="form">
      <a-row>
        <a-col :md="8" :sm="12">
          <a-form-item label="院系"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}">
            <a-select allowClear v-decorator="['kkyxm',
              {
                rules: [{ required: true, message: '请选择院系!' }],
              }]" @change="yxChange" showSearch :filterOption="filterYx">
              <a-select-option v-for="i in selectMenu.yxList" :key="i.id" :value="i.dwh">{{ i.dwh + ' ' + i.dwmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12">
          <a-form-item label="课程"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}">
            <a-select allowClear v-decorator="['kcIndex',
              {
                rules: [{ required: true, message: '请选择课程!' }],
              }]" showSearch :filterOption="filterKc">
              <a-spin v-if="kcLoading" slot="notFoundContent" size="small"/>
              <a-select-option v-for="(i,index) in selectMenu.courseList" :key="index" :value="index">{{ i.kch + ' ' + i.kcmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12">
          <a-form-item label="课程类别"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}">
            <a-select v-decorator="['kclxm',
              {
                rules: [{ required: true, message: '请选择课程类别!' }],
              }]">
              <a-select-option v-for="i in TYPE0359" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
<!--        <a-col :md="8" :sm="12">
          <a-form-item label="是否学位课"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}">
            <a-select allowClear v-decorator="['sfxwk',
              {
                rules: [{ required: true, message: '请选择是否学位课!' }],
              }]">
              <a-select-option v-for="i in TYPE0065" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12">
          <a-form-item label="修课要求"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}">
            <a-select allowClear v-decorator="['bxhxx',
              {
                rules: [{ required: true, message: '请选择修课要求!' }],
              }]">
              <a-select-option v-for="i in TYPE0323" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>-->
        <a-col :md="8" :sm="24">
          <a-button type="primary" @click="add" style="margin:0 10px">添加课程</a-button>
        </a-col>
      </a-row>
    </a-form>
    <!--<div>已添加课程列表</div>-->
    <a-table
      :columns="columns"
      :dataSource="kcList"
      :alert="{show: false}"
      size="middle"
      :pagination="false"
      :scroll="{ y: 240 }"
    >
      <span slot="bxhxx" slot-scope="text">{{ text === '0' ? '选修' : '必修' }}</span>
      <span slot="sfxwk" slot-scope="text">{{ text === '0' ? '否' : '是' }}</span>
      <span slot="operation" slot-scope="text, record, index">
        <a @click="showCourse(record)">查看</a>
        <a v-if="record.sfmbkc != 1" @click="deleteCourse(index)">删除</a>
      </span>
    </a-table>
    <course-detail :visible="courseVisible" @cancel="courseVisible = false" :confirmLoading="confirmLoading" :courseInfo="courseInfo"/>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import courseDetail from '@/views/cultivate/course/courseDetail'

export default {
  data () {
    return {
      selectMenu: {},
      TYPE0359:[],
      form: this.$form.createForm(this),
      columns: [
        {
          title: '课程代码',
          dataIndex: 'kch',
          width: '15%'
        },
        {
          title: '课程名称',
          dataIndex: 'kcmc',
          width: '20%'
        },
        {
          title: '学时',
          width: 80,
          dataIndex: 'zxs'
        },
        {
          title: '学分',
          width: 80,
          dataIndex: 'xf'
        },
        {
          title: '课程类型',
          dataIndex: 'kclxmc',
          width: '10%'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'operation' },
          width: '10%'
        }
      ],
      kcList: [],
      kcLoading: false,
      courseInfo: {},
      courseVisible: false,
      confirmLoading: false
    }
  },
  components: {courseDetail},
  computed: {
    ...mapState({
      TYPE0065: state => state.app['TYPE0065'],
      TYPE0323: state => state.app['TYPE0323'],
      // TYPE0359: state => state.app['TYPE0359']
    })
  },
  created () {
    this.$store.dispatch('app/setDictionary', 'TYPE0323')
    this.$store.dispatch('app/setDictionary', 'TYPE0065')
    // this.$store.dispatch('app/setDictionary', 'TYPE0359')
    this.initSelectMenu()
    this.initDict()
  },
  methods: {
    initDict () {
      this.$api.dict.queryAll({
        typeCode: 'TYPE0359',
        lb: 'process'
      }).then(res => {
        this.TYPE0359 = res.data
        this.form.setFieldsValue({
          kclxm: '7',
        })
      })
    },
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yxList: res[0].data
        }
      })
    },
    yxChange (code) {
      this.form.setFieldsValue({kcIndex: ''})
      this.$set(this.selectMenu, 'courseList', [])
      if (code) {
        this.kcLoading = true
        this.$api.cultivate.courseAll({kcssyxm: code, type: 'process'}).then(res => {
          this.$set(this.selectMenu, 'courseList', res.data)
        }).finally(() => {
          this.kcLoading = false
        })
      } else {
        this.$set(this.selectMenu, 'courseList', [])
      }
    },
    filterYx (value, yx) {
      return yx.componentOptions.children[0].text.indexOf(value) !== -1
    },
    filterKc (value, kc) {
      return kc.componentOptions.children[0].text.indexOf(value) !== -1
    },
    add () {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        // let kcList = this.kcList.map(item => {
        //   return JSON.stringify(item)
        // })
        let kcItem = Object.assign({}, this.selectMenu.courseList[values.kcIndex], values)
        kcItem.kclxmc = this.TYPE0359.find(i => {
          return i.code === values.kclxm
        }).name
        let kcIndex = this.kcList.findIndex(kc => {
          return kc.kcdm == kcItem.kch || kc.kch == kcItem.kch
        })
        if (kcIndex === -1) {
          this.kcList.push(kcItem)
        } else {
          this.$message.warn('不能添加重复的课程')
        }
      })
    },
    showCourse (course) {
      this.confirmLoading = true
      this.courseVisible = true
      this.$api.cultivate.courseDetail(course.id).then(res => {
        this.confirmLoading = false
        this.courseInfo = res.data
      })
    },
    deleteCourse (index) {
      this.kcList.splice(index, 1)
    }
  }
}
</script>

<style>

</style>
